<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>产品录入</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/icons/favicon.ico">
    <link rel="apple-touch-icon" href="images/icons/favicon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="styles/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="styles/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/all.css">
    <link type="text/css" rel="stylesheet" href="styles/main.css">
    <link type="text/css" rel="stylesheet" href="styles/style-responsive.css">
</head>
<body>
<!-- 页面内容开始 -->
<div class="page-content">
    <div id="tab-general">
        <div class="row mbl">
            <div class="col-lg-12">
                <div class="col-md-12">
                    <div id="area-chart-spline" style="width: 100%; height: 300px; display: none;"></div>
                </div>
            </div>
			<div class="col-lg-12">
				<div class="row">
                    <div class="col-md-12">					
                        <div class="row mtl">
                            <div class="col-md-1"></div>
                            <div class="col-md-10">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab-edit" data-toggle="tab">产品录入</a></li>                                    
                                </ul>
                                <div id="generalTabContent" class="tab-content">
                                    <div id="tab-edit" class="tab-pane fade in active">
                                        <form action="/BeautyClub/product/create.do" method="post" id="product-form" class="form-horizontal">											
                                            <h3>产品信息</h3>
                                            <div class="form-group"><label class="col-sm-3 control-label">产品名称</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-9"><input type="text" placeholder="请输入产品名称" name="pName" class="form-control product-name"/></div>
                                                    	<!-- input type="hidden" value="" name="titlePic" id="titlePic"/-->
                                                    	<!-- input type="hidden" value="" name="images" id="decPic"/-->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group"><label class="col-sm-3 control-label">原价</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4"><input id="datepicker-normal" type="number" name="price" class="form-control old-price"/></div>
                                                    </div>
                                                </div>
                                            </div>
											<div class="form-group"><label class="col-sm-3 control-label">现价</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4"><input id="datepicker-normal" type="number" name="currentPrice" class="form-control current-price"/></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--div class="form-group"><label class="col-sm-3 control-label">产品类型</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-9">
                                                            <div class="radio">
																<label class="radio-inline"><input type="radio" value="1" name="status" checked/>&nbsp;普通产品</label>
																<label class="radio-inline"><input type="radio" value="2" name="status"/>&nbsp;特价活动</label>
																<label class="radio-inline"><input type="radio" value="3" name="status"/>&nbsp;美槿案例</label>
															</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div-->                                            
                                            <div class="form-group"><label class="col-sm-3 control-label">一级类别</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4"><select class="form-control category-first" name="parent" onchange="getChildType();">
                                                            <option value="0">--请选择--</option>                                                            
                                                        </select></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group"><label class="col-sm-3 control-label">二级类别</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4"><select class="form-control category-second" name="cId">
                                                            <option value='0'>--请选择--</option>
                                                        </select></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group"><label class="col-sm-3 control-label">销量</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4"><input id="datepicker-normal" value="0" type="number" name="sales" class="form-control sales"/></div>
                                                    </div>
                                                </div>
                                            </div>                                            
                                        </form>
                                         
                                        <form action="/Beauty/upload/uploadPic.do" method="post" id="titlePicForm" class="form-horizontal" enctype="multipart/form-data">
                                            <div class="form-group"><label class="col-sm-3 control-label">产品logo</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4">                                                   	
                                                        	<input id="logo-uploadImg" type="file" accept=".jpg,.jpeg,.png" class="form-control" name="pic"/>
                                                        	<img id="logo-uploadImg-show"></img> 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                            
                                        <form action="/Beauty/upload/uploadPic.do" method="post" id="decPicForm" class="form-horizontal" enctype="multipart/form-data">
                                            <div class="form-group"><label class="col-sm-3 control-label">产品详情</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4">                                                        	
                                                        	<input id="dec-uploadImg" type="file" accept=".jpg,.jpeg,.png" class="form-control" name="pic"/>
                                                        	<div style="overflow-y:auto;overflow-x:hidden" id="dec-scroll">
                                                        		<img id="dec-uploadImg-show"></img>
                                                        	</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>										
                                        <hr/>                                          
                                        <button type="submit" class="btn btn-green btn-block" onclick="submitProduct()">提 交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 页面内容结束 -->
    <script src="script/jquery-1.10.2.min.js"></script>
    <script src="script/jquery-migrate-1.2.1.min.js"></script>
    <script src="script/jquery-ui.js"></script>
    <script src="script/bootstrap.min.js"></script>
    <script src="script/bootstrap-hover-dropdown.js"></script>
    <script src="script/html5shiv.js"></script>
    
    <script src="script/jquery.metisMenu.js"></script>
    <script src="script/jquery.slimscroll.js"></script>
    
    <script src="script/icheck.min.js"></script>
    
    <script src="script/jquery.menu.js"></script>
    <script type="text/javascript" src="script/layer/layer.js"></script>
    <script src="script/myjs/reserve.js"></script>
    <!--CORE JAVASCRIPT-->
    <script type="text/javascript" src="js/jquery-form.js"></script>   
    <script>  
    window.onload = function(){
    	getMainType();
    	$('#logo-uploadImg').change(function(){
    		console.log(this)
    		var error = false;
    		var name = $("#logo-uploadImg").val();
    		if(name == null || name == "")
	  			return false;
	  		var file = document.getElementById('logo-uploadImg').files[0];
	  		if (file) {
		  		var fileType = name.substring(name.lastIndexOf(".")+1).toLowerCase();		  		
		  		if(fileType != "jpg" && fileType != "jpeg" && fileType != "png"){
		  			layer.alert("图片上传格式只支持jpg/jpeg/png",{icon:0});
	  		  		error = true;
		  		}else if (file.size > 1024 * 1024 * 5){
		  			layer.alert("文件不能大于5M",{icon:0});
      		  		error = true;
      	  		}
	  		}
	  		if(error){
	  			$('#logo-uploadImg').val("");
  		  		$('#logo-uploadImg-show').attr("src","");
  		  		$('#logo-uploadImg-show').css({'height':'0px','width':'0px'});
  		  		return false;
	  		}
	  		// 上传设置
	    	var options = {
	            // 规定把请求发送到那个URL
	            url: "/BeautyClub/product/uploadPic.do?name=titlePic",
	            // 请求方式
	            type: "post",
	            // 服务器响应的数据类型
	            dataType: "json",
	            // 请求成功时执行的回调函数
	            success: function(data, status, xhr) {	                    
	                if(data.status == true){	                	
	                	var img = $('#logo-uploadImg-show');
	            		if(file){
	            			img[0].src = window.URL.createObjectURL(file);
	            			$(img[0]).css({'height':'100px','width':'100px'});
	            		}
	                }else{
	                	$('#logo-uploadImg').val("");
	                	layer.alert(data.msg,{icon:2});
            		}
	            },
	            error: function(){
	            	$('#logo-uploadImg').val("");
	            	layer.alert("上传失败！",{icon:2});
	            }
	    	};	  		
	    	$("#titlePicForm").ajaxSubmit(options);
    	});
    	
    	$('#dec-uploadImg').change(function(){
    		console.log(this)
    		error = false;
    		var name = $("#dec-uploadImg").val();
    		if(name == null || name == "")
	  			return false;
	  		var file = document.getElementById('dec-uploadImg').files[0];
	  		if (file) {
		  		var fileType = name.substring(name.lastIndexOf(".")+1).toLowerCase();		  		
		  		if(fileType != "jpg" && fileType != "jpeg" && fileType != "png"){
		  			layer.alert("图片上传格式只支持jpg/jpeg/png",{icon:0});
	  		  		error = true;
		  		}else if (file.size > 1024 * 1024 * 5){
		  			layer.alert("文件不能大于5M",{icon:0});
      		  		error = true;
      	  		}
	  		}
	  		if(error){
	  			$("#dec-uploadImg").val("");
  		  		$('#dec-uploadImg-show').attr("src","");
  		  		$('#dec-uploadImg-show').css({'width':'0px'});
  		  		$("#dec-scroll").css({'height':'0px','width':'0px'});
  		  		return false;
	  		}
	  		// 上传设置
	    	var options = {
	            // 规定把请求发送到那个URL
	            url: "/BeautyClub/product/uploadPic.do?name=decPic",
	            // 请求方式
	            type: "post",
	            // 服务器响应的数据类型
	            dataType: "json",
	            // 请求成功时执行的回调函数
	            success: function(data, status, xhr) {	                    
	                if(data.status == true){	                	
	                	var img = $('#dec-uploadImg-show');
	            		if(file){
	            			img[0].src = window.URL.createObjectURL(file);
	            			$("#dec-scroll").css({'height':'400px','width':'400px'});
	            			$(img[0]).css({'width':'390px'})
	            		}	            		
	                }else{
	                	$("#dec-uploadImg").val("");
	                	layer.alert(data.msg,{icon:2});
            		}
	            },
	            error: function(){
	            	$("#dec-uploadImg").val("");
	            	layer.alert("上传失败！",{icon:2});
	            }
	    	};
	    	$("#decPicForm").ajaxSubmit(options);    		
    	});

    }
    </script>    
	<script type="text/javascript">	
	function submitProduct() {
		var pName = $(".product-name").val();
		if(pName==null || pName==""){			
			layer.alert("请输入产品名！",{icon:0});
			return false;
		}
		var parent = $(".category-first").val();
		var cId = $(".category-second").val();
		if(parent==null || parent=="" || parent=="0" ||
			cId==null || cId=="" || cId=="0"){			
			layer.alert("请选择类别！",{icon:0});
			return false;
		}
		var price = $(".old-price").val();
		var currentPrice = $(".current-price").val();
		if(price==null || currentPrice==null || price=="" || currentPrice==""){
			layer.alert("请填写价格！",{icon:0});
			return false;
		}
		var title = $("#logo-uploadImg").val();
		if(title==null || title==""){			
			layer.alert("请选择产品logo照片！",{icon:0});
			return false;
		}
		var dec = $("#dec-uploadImg").val();
		if(dec==null || dec==""){			
			layer.alert("请选择产品详情介绍照片！",{icon:0});
			return false;
		}
		
		$.ajax({			
			type: "POST",
			url:"/BeautyClub/product/create.do",
			data:$('#product-form').serialize(),// 你的formid	
		    error: function(data) {		    	     
		    	layer.alert("与服务器连接失败！",{icon:2});
		    },
		    success: function(data) {
		    	if(data == "true"){                	
                	$(".product-name").val("");
                	$(".old-price").val("");
                	$(".current-price").val("");
                	
                	$("#dec-uploadImg").val("");
      		  		$('#dec-uploadImg-show').attr("src","");
      		  		$('#dec-uploadImg-show').css({'width':'0px'});
      		  		$("#dec-scroll").css({'height':'0px','width':'0px'});
      		  		$('#logo-uploadImg').val("");
  		  			$('#logo-uploadImg-show').attr("src","");
  		  			$('#logo-uploadImg-show').css({'height':'0px','width':'0px'});
  		  			layer.alert("提交成功！",{icon:1});
                }else{
                	layer.alert(data,{icon:2});
                }
		    }
		});		
	}
	</script>	
</body>
</html>
